import React, { Component } from "react";
import "../css/scheduler.scss";

export default class SCheduler extends Component {
  constructor(props) {
    console.log(props);
    super(props);
    this.state = {
      list: [], //渲染行程日历的
      date: new Date(), //表示当前时间
    };
  }
  prev = () => {
    this.state.date.setMonth(this.state.date.getMonth() - 1);
    this.setState({});
  };
  next = () => {
    this.state.date.setMonth(this.state.date.getMonth() + 1);
    this.setState({});
  };

  //   componentDidMount() {
  //     this.initDate();
  //   }

  render() {
    let currentMonthDays = this.state.date.getCurrentMonthDays();
    //当前月有多少天
    let prevMonthDays = this.state.date.getPrevMonthDays();
    //上一个月有多少天

    let week = this.state.date.getCurrentMonthFirstDayWeek();
    //第一天是星期几
    week = week === 0 ? 7 : week;

    let nextMonthDays = 42 - currentMonthDays - week + 1;
    let list = [];
    for (let i = prevMonthDays - week + 2; i <= prevMonthDays; i++) {
      let tempDate = new Date("2000-01-01");
      tempDate.setFullYear(this.state.date.getFullYear());
      tempDate.setMonth(this.state.date.getMonth() - 1);
      tempDate.setDate(i);
      console.log(this.props);
      let info = this.props.list
        .filter((item) => {
          let date1 = new Date(item.date).formate("yyyy-mm-dd");
          let date2 = tempDate.formate("yyyy-mm-dd");
          return date1 === date2;
        })
        .map((item) => item.info)
        .join("-");
      //要生成的时间 在行程中有安排

      list.push({
        date: tempDate,
        i,
        className: "prev",
        info,
      });
    }
    //上一个月
    for (let i = 1; i <= currentMonthDays; i++) {
      let tempDate = new Date("2000-01-01");
      tempDate.setFullYear(this.state.date.getFullYear());
      tempDate.setMonth(this.state.date.getMonth());
      tempDate.setDate(i);

      let info = this.props.list
        .filter((item) => {
          let date1 = new Date(item.date).formate("yyyy-mm-dd");
          let date2 = tempDate.formate("yyyy-mm-dd");
          return date1 === date2;
        })
        .map((item) => item.info)
        .join("-");

      list.push({
        date: tempDate,
        i,
        info,
        className: "current",
      });
    }
    //当前月

    for (let i = 1; i <= nextMonthDays; i++) {
      let tempDate = new Date("2000-01-01");
      tempDate.setFullYear(this.state.date.getFullYear());
      tempDate.setMonth(this.state.date.getMonth() + 1);
      tempDate.setDate(i);

      let info = this.props.list
        .filter((item) => {
          let date1 = new Date(item.date).formate("yyyy-mm-dd");
          let date2 = tempDate.formate("yyyy-mm-dd");
          return date1 === date2;
        })
        .map((item) => item.info)
        .join("-");

      list.push({
        date: tempDate,
        i,
        className: "next",
        info,
      });
    }

    return (
      <div className="scheduler-box">
        <div className="scheduler-header">
          <div
            className="scheduler-prev"
            onClick={(e) => {
              e.stopPropagation();
              this.prev();
            }}
          >
            上
          </div>
          <div className="scheduler-middle">
            {this.state.date.formate("yyyy年mm月")}
          </div>
          <div
            className="scheduler-next"
            onClick={(e) => {
              e.stopPropagation();
              this.next();
            }}
          >
            下
          </div>
        </div>
        <div className="scheduler-th">
          <div className="scheduler-td">一</div>
          <div className="scheduler-td">二</div>
          <div className="scheduler-td">三</div>
          <div className="scheduler-td">四</div>
          <div className="scheduler-td">五</div>
          <div className="scheduler-td">六</div>
          <div className="scheduler-td">日</div>
        </div>
        <div className="scheduler-content">
          {list.map((item, index) => {
            return (
              <div
                className="scheduler-item"
                key={index}
                onClick={() => {
                  this.props.onGetSchedulerInfo(item);
                  // this.setState({
                  //   selectedDate: item.date.formate("yyyy-mm-dd"),
                  //   visble:false
                  // });
                }}
              >
                <span className={item.className}>{item.i}</span>
                <br />
                <span>{item.date.getJQ()}</span>
                <span>
                  {new Intl.DateTimeFormat("zh-u-ca-chinese", {
                    dateStyle: "medium",
                  })
                    .format(item.date)
                    .slice(-2)}
                </span>
                <br />
                <span style={{color:"red"}}>{item.info?"___":""}</span>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
}
